<template>
  <a-card :bordered="false" class="grayDiv" style="background-color: #f2f4f5">

    <!-- 查询区域 -->
    <div class="table-header" style="position: relative;">
        <h5><span>{{companyObj.CompanyName}}</span><b v-show="companyObj.OfficeAddress">({{companyObj.OfficeAddress}})</b></h5>
        
      <div style="position: absolute;width:30%;right: 0px;top: 30px">
          <div class="imgDiv">
            <img v-if="companyObj.CompanyLogo" :src="'https://link.zhangtongshe.com'+JSON.parse(companyObj.CompanyLogo).downloadUrl">
            <img v-else :src="require('../assets/default_company.png')">
            <!-- <span v-else style="display: block;
    text-align: center;
    line-height: 150px;
    font-size: 20px;
    color: #dddddd;">公司Logo</span> -->
          </div>
        </div>
      <div class="tagDiv">

      	<div style="margin-top:40px">
          <label>近半年互动：</label>
      		<template v-if="companyObj.InteractiveTag"><span class="tagSpan tagRed" v-for="(item,index) in companyObj.InteractiveTag.split(',')">{{item}}</span></template>
          <span v-else>无记录</span>
      	</div>
        <div style="margin-top:20px">
          <label>近半年需求：</label>
          <template v-if="companyObj.DemandTag">
          <span class="tagSpan tagOrange" v-for="(item,index) in companyObj.DemandTag.split(',')">{{item}}</span>
          </template>
          <span v-else>无记录</span>
        </div>
      	<div  style="margin-top:20px">
          <label>团队标签：</label>
          <template v-if="companyObj.TeamTag">
      		<span class="tagSpan" v-for="(item,index) in companyObj.TeamTag.split(',')">{{item}}</span>
          </template>
          <span v-else>无记录</span>
      	</div>
      	<div  style="margin-top:20px">
          <label>行业标签：</label>
          <template v-if="companyObj.IndustryTag">
            <span class="tagSpan tagBlue" v-for="(item,index) in companyObj.IndustryTag.split(',')">{{item}}</span>
          </template>
      		<span v-else>无记录</span>
      	</div>
      </div>
      <div style="display: flex;justify-content: space-between;margin-top:20px;margin-bottom: 20px;width: 70%;font-size: 16px;">
      	<div>
      		<label>所属行业：</label>
      		<span>{{companyObj.Industry_Industry}}</span>
      	</div>
      	<div>
      		<label>人员规模：{{companyObj.StaffSize_Value}}</label>
      		<span></span>
      	</div>
      	<div>
      		<label>纳税规模：{{companyObj.TaxedSize_Value}}</label>
      		<span></span>
      	</div>
      	<div>
      		<label>融资轮次：{{companyObj.RefinanceRound_Value}}</label>
      		<span></span>
      	</div>
      </div>
    </div>

    <div class="tabDiv">
    	<a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="互动信息">
		      <cp1 :companyId="companyId"></cp1>
		    </a-tab-pane>
		    <a-tab-pane key="2" tab="需求信息">
		      <cp2 :companyId="companyId"></cp2>
		    </a-tab-pane>
		    <a-tab-pane key="3" tab="基本信息" force-render>
		      <cp3 :companyId="companyId" ref="cp3"></cp3>
		    </a-tab-pane>
		    <a-tab-pane key="4" tab="公司人员">
		      <cp4 :companyId="companyId"></cp4>
		    </a-tab-pane>
		    <a-tab-pane key="5" tab="经营状况">
		      <cp5 :companyId="companyId"></cp5>
		    </a-tab-pane>
		    <a-tab-pane key="6" tab="融资历程">
		      <cp6 :companyId="companyId"></cp6>
		    </a-tab-pane>
		    <a-tab-pane key="7" tab="业务产品">
		      <cp7 :companyId="companyId"></cp7>
		    </a-tab-pane>
		    <a-tab-pane key="8" tab="新闻情报">
		      <cp8 :companyId="companyId"></cp8>
		    </a-tab-pane>
		    <a-tab-pane key="9" tab="公司附件">
		      <cp9 :companyId="companyId"></cp9>
		    </a-tab-pane>
		  </a-tabs>
    </div>
  </a-card>
</template>
<script>
	import cp1 from './companyData/cp1'
	import cp2 from './companyData/cp2'
	import cp3 from './companyData/cp3'
	import cp4 from './companyData/cp4'
	import cp5 from './companyData/cp5'
	import cp6 from './companyData/cp6'
	import cp7 from './companyData/cp7'
	import cp8 from './companyData/cp8'
	import cp9 from './companyData/cp9'
	export default {
		components:{
			cp1,cp2,cp3,cp4,cp5,cp6,cp7,cp8,cp9
		},
		data(){
      return{
      	companyObj:{}
      }
    },
    props:{
    	companyId:{
    		type:String
    	}
    },
    created(){
    },
    mounted(){
    	
    	this.getCompany();
    },
    methods:{
    	callback(val){
    		if(val == 3){
    			this.$refs.cp3.open();
    		}
    	},
    	getCompany(){
    		let param = {
    			conditions:[{
    				"field":'CompanyId',
            "operator":"=",
            "value":this.companyId
    			}]
    		}
    		this.$http.postAction('/companyInfo/queryRows',param).then(res=>{
            if (res.status == 1) {
                this.companyObj = res.data.rows[0];
            }else{
                this.$message.warning(res.message)
            }
        })
    	}
    }
	}
</script>

<style scoped>
	.table-header h5 span{
		font-size:30px;
	}
	.table-header h5 b{
		font-size:22px;
		font-weight: normal;
	}
  .imgDiv{
        width: 240px;
        float: right;
        margin-right: 30px;
    padding: 20px;
    /* height: 200px; */
    border: dashed 1px #cecece;
    border-radius: 3px;
  }
  .imgDiv img{
    width: 200px;
    max-height: 250px;
  }
  .imgDiv{
    -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  }
</style>
<style>
  .grayDiv .ant-card-body{
    padding:0px;
    overflow-y: visible;
  }
  .grayDiv .table-header{
    padding: 24px;
    background-color: #ffffff;
    margin-bottom:20px;
  }
  .grayDiv .tabDiv{
    padding: 24px;
    background-color: #ffffff;
  }
  .tabDiv .ant-tabs-top-bar{
    padding-bottom: 12px;
  }
</style>